<template>
   <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>医美管理</el-breadcrumb-item>
      <el-breadcrumb-item>医美记录</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear='clearQuery' >
            <el-button slot="append" icon="el-icon-search" @click="queryGoods" ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
        <el-button type="primary" @click='addGood'>搜索记录</el-button>
        </el-col>
      </el-row>
    <el-table
    :data="goodsList"
    stripe
    style="width: 100%">
     <el-table-column type="index"></el-table-column>
        <el-table-column label="项目名称" prop="goods_name"></el-table-column>
        <el-table-column label="项目价格" prop="goods_price" width="130px"></el-table-column>
        <el-table-column label="宠物品种" prop="pets_type" width="130px"></el-table-column>
         <el-table-column label="宠物性别" prop="sex" width="130px"></el-table-column>
        <el-table-column label="宠物健康状态" prop="pets_status" width="230px"></el-table-column> 
        <el-table-column label="医美护理师" prop="yms" width="180px"></el-table-column>
        <el-table-column label="医美时间" prop="ym_time" width="270px">
         
        </el-table-column>
        <el-table-column label="操作" width="160px">
          <template >
            <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
          </template>
        </el-table-column>
    </el-table>
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagenum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total" background>
    </el-pagination>
      </el-card>
      </div>
</template>

<script>
import request from '../../api/index'
export default {
    name:'List2',
    data(){
        return {
        queryInfo:{
            query:'',
            pagenum:1,
            pagesize:10
        },
        goodsList:[
          {goods_name:'体检',goods_price:100,pets_type:"边牧",sex:'公',pets_status:"缺钙",
          yms:"郑上优u",ym_time:'2023-09-28'},
          {goods_name:'体检',goods_price:100,pets_type:"阿拉斯加",sex:'母',pets_status:"肥胖、脂肪肝",
          yms:"郑上元",ym_time:'2023-09-28'},
          {goods_name:'体检',goods_price:100,pets_type:"加菲猫",sex:'母',pets_status:"良好",
          yms:"沈仙仙",ym_time:'2023-09-28'},
          {goods_name:'水洗护理',goods_price:30,pets_type:"泰迪",sex:'公',pets_status:"良好",
          yms:"七七",ym_time:'2023-09-28'},
          {goods_name:'毛发修剪',goods_price:30,pets_type:"萨摩耶",sex:'公',pets_status:"良好",
          yms:"夏与冰",ym_time:'2023-09-28'},
          {goods_name:'毛发修剪',goods_price:30,pets_type:"阿拉斯加",sex:'母',pets_status:"良好",
          yms:"郑上优u",ym_time:'2023-09-28'},
          {goods_name:'体检',goods_price:100,pets_type:"边牧",sex:'公',pets_status:"良好",
          yms:"郑上优u",ym_time:'2023-09-28'},
          {goods_name:'体检',goods_price:100,pets_type:"边牧",sex:'公',pets_status:"缺钙",
          yms:"郑上优u",ym_time:'2023-09-28'},
        ],
        total:''
        }
    },
    created(){
        //this.getGoodsList()
    },
    methods:{
      async  getGoodsList(){

            const {data:res}=await request({url:'/goods',method:'get',
                                            params:this.queryInfo});
            if(res.meta.status!==200){
               return this.$message.error("获取项目信息失败！")
            }
            this.goodsList=res.data.goods;
            this.total=res.data.total;
            this.$message.success("获取项目信息成功！")
        },
        handleSizeChange(val) {
       this.queryInfo.pagesize=val
       //this.getGoodsList()
      },
      handleCurrentChange(val) {
          this.queryInfo.pagenum=val;
          //this.getGoodsList()
      },
      queryGoods(){
          //this.getGoodsList()
      },
      clearQuery(){
          this.queryInfo.query=""
          //this.getGoodsList()
      },
      addGood(){
          this.$router.push('/goods/add')
      }
    }

}
</script>

<style lang='less' scoped>

</style>